<template>
  <div class="flex flex-col h-full">
    <SearchContainer is-width @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '78px' } }">
        <a-form-item name="pyjm" label="" class="w-[300px]">
          <a-input v-model:value="formState.pyjm" placeholder="姓名/助记码/卡号/手机号/身份证号" />
        </a-form-item>
        <!-- <a-form-item name="createDateRange" label="创建日期" class="w-[320px] ml-2">
          <a-range-picker v-model:value="formState.createDateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item> -->
        <a-form-item name="dateRange" label="预约日期" class="w-[320px] ml-2">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="就诊事项" class="!w-72">
          <a-select v-model:value="formState.dictOutpMatterId" placeholder="请选择就诊事项" allow-clear>
            <a-select-option v-for="(item, index) in dictOutList" :key="index" :value="item.dictOutpMatterId">{{ item.matterName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="关注项目" class="!w-64 mx-2">
          <SelectFocusProject v-model:value="formState.brGzxm" max-tag-count="responsive" />
        </a-form-item>
        <a-form-item name="yyzt" label="状态" class="!w-64">
          <a-select v-model:value="formState.yyzts" placeholder="请选择" mode="multiple" max-tag-count="responsive">
            <a-select-option value="0">有效</a-select-option>
            <a-select-option value="1">到场</a-select-option>
            <a-select-option value="2">作废</a-select-option>
            <a-select-option value="3">过期</a-select-option>
            <!--<a-select-option value="4">退号</a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item name="yyys" label="预约医生" class="!w-64 ml-2">
          <a-input v-model:value="formState.yyys" placeholder="请输入" />
        </a-form-item>
        <a-form-item name="brYwyName" label="业务员" class="!w-64">
          <SelectTable v-model:value="formState.brYwyName" type="员工" page-size="999" @select="onSelectEmployee('brYwy', $event)" />
        </a-form-item>
        <a-form-item name="ksdms" label="科室" class="!w-64">
          <SelectDepartment v-model:value="formState.ksdms" max-tag-count="responsive" multiple medical-type />
        </a-form-item>
        <a-form-item v-if="!isArmy" label="客户标签" class="!w-64 ml-2">
          <!-- mode="multiple" -->
          <a-select
            v-model:value="formState.patientLabel"
            :options="tagsList"
            allow-clear
            :max-tag-count="2"
            :field-names="{ label: 'labelName', value: 'id' }"
            placeholder="请选择"
            @change="onSelectLabel"
          />
        </a-form-item>
        <a-form-item v-if="!isArmy" class="!w-64 ml-2">
          <a-select
            v-model:value="formState.patientLabelList"
            :options="tagsListAll"
            allow-clear
            mode="multiple"
            :max-tag-count="2"
            :field-names="{ label: 'itemName', value: 'id' }"
            placeholder="请选择"
          />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="flex justify-end mb-2">
        <a-form>
          <a-form-item label="客户来源" class="w-[300px] mr-2">
            <SelectCustomerSource v-model:value="formState.khly" multiple max-tag-count="responsive" />
          </a-form-item>
        </a-form>
        <BaseExport type="门诊" name="预约列表" code="00001169" :search-params="formState">导出</BaseExport>
      </div>
      <BaseTable fill :loading="loading" column-code="00001169" :scroll="{ x: 2150 }" :data-source="tableData" bordered :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'brYwyName'">
            {{ record?.brYwyName || record?.brYwy }}
          </template>
          <template v-if="column.dataIndex === 'yysj'"> {{ record.yysj }} </template>
          <template v-if="column.dataIndex === 'yyztStr'">
            <a-tag v-if="record.yyzt === '0'" color="blue">有效</a-tag>
            <a-tag v-if="record.yyzt === '1'" color="green">到场</a-tag>
            <a-tag v-if="record.yyzt === '2'" color="red">作废</a-tag>
            <a-tag v-if="record.yyzt === '3'" color="red">过期</a-tag>
            <a-tag v-if="record.yyzt === '4'" color="red">退号</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" :disabled="record.yyzt !== '0'" @click="onHandleEdit(record)"> 挂号 </a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>

    <RegisterModal v-model:open="editOpen" :row-data="rowData" title="挂号" @success="onSuccess" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import SelectDepartment from '@/components/SelectDepartment'
import SearchContainer from '@/components/SearchContainer'
import { getSystemConfig } from '@/utils/systemConfig'
import RegisterModal from '@/components/RegisterModal'
import useStore from '../../store'

const router = useRouter()
const userInfo = useStore()

const rowData = ref({})
const editOpen = ref(false)
const formRef = ref(null)
const tagsList = ref([])
const tagsListMany = ref([])
const tagsListAll = ref([])
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  // createDateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  // createDateRange: [],
  ksdms: []
})

const onSelectEmployee = (key, select) => {
  formState.value[key + 'Name'] = select.empName
  formState.value[key] = select.empId
}

const { loading, tableData, pagination, getData } = useTable({
  url: '/outp/mzdj/getBookingList',
  params: formState.value,
  immediate: true
})
const onHandleEdit = (row) => {
  if (getSystemConfig('GHDJYS') === '1') {
    rowData.value = { ...row }
    editOpen.value = true
  } else {
    userInfo.patientInfo = row
    router.push({
      path: '/out-registration/register',
      query: {
        id: row.brId,
        dictOutpMatterId: row?.dictOutpMatterId,
        yylsh: row.yylsh
      }
    })
  }
}

const onSuccess = () => {
  editOpen.value = false
  getData()
}
const dictOutList = ref([])

// 获取就诊事项
const getDictOutList = async () => {
  const res = await post('/outp/mzdj/getDictOutpMatterNumberList')
  if (res.code !== 0) return message.error(res.msg)
  dictOutList.value = res.data
}

// 客户标签
const getTagsList = async () => {
  const { code, data, msg } = await post('/operation/opex/getAllTagsItem', { status: 0 })
  if (code !== 0) return message.error(msg || '获取标签失败')
  tagsList.value = data.map((item) => {
    return {
      labelName: item.labelName,
      id: item.id
    }
  })
  const arr = data
    .map((item) => {
      if (item.children.length > 0) {
        return item.children.map((j) => {
          return {
            id: j.id,
            itemName: j.itemName,
            labelId: j.labelId
          }
        })
      }
    })
    .flat()
  tagsListMany.value = arr.filter((item) => item !== undefined)
}

// 选中客户标签
const onSelectLabel = (id) => {
  formState.value.patientLabelList = []
  const arrAll = tagsListMany.value.map((item) => {
    if (item.labelId === id) {
      return {
        id: item.id,
        itemName: item.itemName
      }
    } else {
      return
    }
  })
  tagsListAll.value = arrAll.filter((item) => item !== undefined)
}

onMounted(() => {
  getData()
  getDictOutList()
  getTagsList()
})
const isArmy = getSystemConfig('NAVYHIS_MODE') === '1' //军用系统
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}
</style>
